<template>
  <div id="container">

    <baidu-map :center="center" :zoom="map_zoom" class="baidu-map-view" ak="mapAK"
               @ready="map_handler" @click="">
      <XHeader    v-show="showlist" :left-options="{showBack: false}" class="head">
        查看房源<a slot="right">更多房源</a>
      </XHeader>
    <bm-control class="control">
      <button @click="addZoom()" class="mybtn">+</button>
      <button @click="decreaseZoom()" class="mybtn">-</button>
      <!-- 3- 19 -->
    </bm-control>
 <bm-control class="control">
      <button @click="back()" class="mybtn1">上一级</button>

      <!-- 3- 19 -->
    </bm-control>
      <group class="mycell" v-show="showlist">
        <cell-box class="cell1"  v-for="item in  houseList">
          <img :src="item.pictureUrl">
          <div class="more-right"  @click="gotoDetail(item.id)">
            <span class="title">{{item.title}}</span>
            <span class="subtitle">{{item.roomType}}/{{item.size}}/{{item.orientedName}}/{{item.community}}</span>


            <div  class="tag">
              <div class="tag1" v-for="it in item.tags ">{{it}}</div>
            </div>
            <span class="price">￥{{item.priceNum}}/月</span>
          </div>
        </cell-box>
      </group>
    </baidu-map>
    <div id="detail" v-show="showdetail">
    <detail :id="house_selected" @close="close">
     </detail>
    </div>
  </div>
</template>

<script>
  import ComplexCustomOverlay from "../../js/ComplexCustomOverlay";
  import CircleMaker from "../../js/maker/CircleMaker";
  import RectMaker from "../../js/maker/RectMaker";
  import XHeader from "vux/src/components/x-header/index";
  import CellBox from "vux/src/components/cell-box/index";
  import {Group} from 'vux'
  import Detail from '../index/Detail.vue';

  export default {
    name: 'Map',
    components: {CellBox, XHeader, Group,Detail},
    data() {
      return {
        presentLocation: 'area',
        map_zoom: 13,
        map: null,
        datas: null,
        size: {area: 12, town: 14, district: 15},
        size_selected: 10,
        center: {lng: 116.407845, lat: 39.914101},
        BMap: null,
        showlist:false,
        houseList: [],
        stack:[],
        house_selected: null,
        showdetail: false
      }
    },

    methods: {
      close(){
        this.showdetail=false;
      },
      gotoDetail(houseid){
          this.house_selected = houseid
          this.showdetail =true
        //在父组件里面把值传入子组件

      },
      back(){
            if(this.stack.length<=1){
              //不准点
              return
            }
              //从栈顶移除
              //从栈顶移除
              this.stack.pop();
              //清除原来的障碍物
              this.map.clearOverlays();
              if(this.stack.length==1){
                this.presentLocation='area'
                  this.map_zoom = this.size.area;
              }else if(this.stack.length==2){
                this.presentLocation='town'
                 this.map_zoom = this.size.town;
              }else{

              }
              //紧接着加入栈顶障碍物

             var  overlays  = this.stack[this.stack.length-1];
             for(var index in overlays){

                this.map.addOverlay(overlays[index]);
             }
             return
        },

            //设计后面的大小控制
      addZoom(){
          this.map_zoom++;
      },
      decreaseZoom(){
          this.map_zoom--;
      },

      map_handler({BMap, map}) {
        this.BMap = BMap;
        this.map = map;
        map.disableDragging();
        var that =this;
        map.addEventListener("touchmove", function (e) {
          that.showlist=false;
           map.enableDragging();
        });
        map.addEventListener("click",function (e) {
          that.showlist=false;
        })
        // TODO: 触摸结束时触发次此事件  此时开启禁止拖动
        map.addEventListener("touchend", function (e) {
          map.disableDragging();
        });

        // 初始化地图 禁止拖动   注：虽禁止拖动，但是可以出发拖动事件
        map.disableDragging();

        map.enableScrollWheelZoom(true);


        var vueThis = this;

        /**
         *加载建筑物
         * @param areaid
         *  @return List<ComplexCustomOverlay>
         *
         */
        function loadOverLays(areaid,ui) {

          //加载某等级级的所有Overlay
          this.$http.loadData(encodeURI("/areas/map?areaId=" + areaid)).then(
            (res) => {
               console.log(this)
              var list = res.data;
              this.center.lat = list[0].coord.latitude
              this.center.lng = list[0].coord.longitude
              var res = [];
              if(ui=="Rect"){
                for (let x in list) {
                  var data1 = new ComplexCustomOverlay(BMap,
                    new BMap.Point(list[x].coord.longitude, list[x].coord.latitude),
                    list[x].label+ '共' + list[x].count + '套房',
                    map,
                    new RectMaker(enterArea,list[x].value),//传入回调方法

                  )
                  res.push(data1)
                }
              }else{
                     for (let x in list) {
                  var data1 = new ComplexCustomOverlay(BMap,
                    new BMap.Point(list[x].coord.longitude, list[x].coord.latitude),
                    list[x].label,
                    map,
                    new CircleMaker(enterArea,list[x].value),//传入回调方法
                    '共' + list[x].count + '套房'
                  )
                  res.push(data1)
                }
              }
             this.datas =  res
             vueThis.stack.push(this.datas)
              for (let i in  this.datas) {
                map.addOverlay(this.datas[i])
                //放入堆栈
              }


            }
          )
        }


  /**
         * 写下回调方法
         */
        function enterArea(areaId) {


            console.log(vueThis)
          if (vueThis.presentLocation == "area") {

            //1.清除原来的覆盖物
            vueThis.map.clearOverlays();
            //2.修改当前状态
            vueThis.presentLocation = "town";
            //3. 加入全新覆盖物
           vueThis.map_zoom = vueThis.size.town;
                loadOverLays.call(vueThis,areaId,"circle");


          } else if (vueThis.presentLocation == 'town') {
            //1.清除原来的覆盖物
            vueThis.map.clearOverlays();
            //修改当前状态
            vueThis.presentLocation = 'district'
            vueThis.map_zoom = vueThis.size.district;
            //渲染出区域
            loadOverLays.call(vueThis,areaId,"Rect");

          } else {
            //收集数据
              vueThis.$http.loadData(encodeURI("/houses/list?areaId="+areaId)).then(

                (res)=>{
                    var data = res.data;
                    //拉起列表，渲染列表
                    vueThis.showlist = true;
                    //渲染List
                    vueThis.houseList = data;
                    for(var i in  vueThis.houseList){
                      //控制
                     vueThis.houseList[i].pictureUrl =  vueThis.houseList[i].pictureUrl.split('|')[0]
                      vueThis.houseList[i].pictureUrl =  vueThis.imgUrl+ vueThis.houseList[i].pictureUrl
                      vueThis.houseList[i].tags =  vueThis.houseList[i].tags.split('|')
                      if(vueThis.houseList[i].tags[0] ==''){
                      vueThis.houseList[i].tags=[]
                        }
                    }
                }
              )
            //拉起

          }

        }

        //默认需要加覆盖物
        loadOverLays.call(this, this.$route.params.areaid,new CircleMaker(enterArea,this.$route.params.areaid))  //传入areaid
      },
// 用于回溯上一级,方案就是使用栈


    }
  }

</script>

<style scoped>
  #detail{
    z-index: 2 ;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0px;
    background-color: white;
  }
  #container1 {
     position:relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: "微软雅黑";
  }

  #my {
    width: 100%;
    height: 0px;
  }

  .baidu-map-view {
    width: 100%;
    height: 667px;
  }

  .head {
    width: 100%;
    position: absolute;
    top: 300px;
    z-index: 1;
  }

  .mycell {
    background-color: white;
    padding: 0px;
    position: relative;
    top: -340px;
    width: 100%;
    height: 340px;
    overflow: scroll;
  }

  .mycell .cell1 {
    padding: 0px;
    height: 140px;
    width: 100%;
    display: flex;
    align-items: center;
  }

  .mycell .cell1 img {
    height: 100px;
    width: 130px;
    margin-left: 10px;
  }

  .mycell .cell1 .more-right {
    height: 100px;
    width: 200px;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .mycell .cell1 .more-right .title {
    width: 100%;
    overflow: hidden;
    height: 28px;
    line-height: 28px;
    font-size: 24px;
    font-weight: 400;
  }

  .mycell .cell1 .more-right .subtitle {
    width: 100%;
    overflow: hidden;
    height: 24px;
    font-size: 20px;
    font-weight: 100;
    color: rgba(0, 0, 0, 0.5);
  }

 .mycell .cell1 .more-right .tag {
    width: 100%;
    overflow: hidden;
    height: 24px;
    display: flex;

  }

  .mycell .cell1 .more-right .tag1 {
    line-height: 80%;
    margin-right: 10px;
      font-size: 10px;
    height: 17px;
    border-radius: 5%;
    background: rgb(215,252,252);
    color: rgb(34, 219, 117);
    text-align: center;
    line-height: 17px;
  }


  .mycell .cell1 .more-right .price {
    font-weight: 700;
    width: 100%;
    overflow: hidden;
    height: 24px;
    font-size: 20px;
    color: red;
  }
  .mybtn{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: lightblue;
  }
  .mybtn1{
    width: 70px;
    height: 70px;
        border-radius: 50%;
         background-color: lightgreen;
         position: absolute;
         top: 500px;
         left: 250px;
  }

</style>
